/**
 * Use this script to fill an HTML template with pivot data.
 *
 * The javascript template is of type 'ejs'.
 * See http://embeddedjs.com/ for details.
 *
 *
 */


/*
 * set to true when replacing widget rendering engine.
 */
this.isCustom = true;

/*
 * exectuted after the widget controller was initialized, useful when overriding entire widget in order to instantiate entirely different implementation.
 *
 * @param {args} wraps all function arguments, including widget, dashboard and widget controller instances.
 *
 */
this.init = function (args) {


};

/*
 * executed before the widget query result is loaded to the DOM and allows canceling such beavior and replace it with custom widget implementation.
 * to cancel the default population just set 'args.cancel = true' and the widget default population will be ignored.
 *
 * @param {args} wraps all function arguments, including query result, widget, dashboard and widget controller instances.
 *
 */
this.beforeResultLoaded = function (args) {

    var options = {

        templateFile: '/box.ejs',
        cssFile: '/merck.css'
    };

    // -- Apppend css file to page
    $('head').append('<link href="' + options.cssFile + '" rel="stylesheet" type="text/css" />');

     // -- Empty existing pivot
    var containerId = $(args.element).attr('id');
    var container = $('#'+containerId);
    container.empty();
    container.closest('tbody').find('.rdTop').empty(); // remove title

    // -- Prepare title & data row
    var titleRow = args.result.md.byIndex;
    var dataRow = args.result.getRow(0);

    // -- Prepare data for template

    var getCssClass = function (val) {

        if (val >= 0)
            return "green";
        else
            return "red";
    };

    var templateData = {

        title: args.widget.title,
        items: [
            { title: titleRow[1].title, value: dataRow[1].value, cssClass: getCssClass(dataRow[1].data) },
            { title: titleRow[2].title, value: dataRow[2].value, cssClass: getCssClass(dataRow[1].data) },
            { title: titleRow[3].title, value: dataRow[3].value, cssClass: getCssClass(dataRow[1].data) },
            { title: titleRow[4].title, value: dataRow[4].value, cssClass: getCssClass(dataRow[1].data) }
        ]
    };

    // -- Render box
    var renderedEl = $.View(options.templateFile, { box: templateData } );
    container.append(renderedEl);

    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
                ourText.css('font-size', fontSize);
                textHeight = ourText.height();
                textWidth = ourText.width();
                fontSize = fontSize - 1;
        } while (textHeight > maxHeight || textWidth > maxWidth && fontSize > 3);
        return this;
    };

    //$('.li', container).textfill({ maxFontPixels: 50 });
};

/*
 * executed after the widget result were added to the DOM. useful to apply DOM tweaks after query result population.
 *
 * @param {args} wraps all function arguments, including query result, widget, dashboard and widget controller instances.
 *
 */
this.afterResultLoaded = function (args) {


};

/*
 * exectuted after all dashboard widget models were initialiezed. useful for binding with other widget events.
 *
 * @param {args} wraps all function arguments, including widget, dashboard and widget controller instances.
 *
 */
this.handleDashboardInitialized = function (args) {
};
